<template>
  <div class="container">
    <page-header
     :backIconShow="backIconShow"
     :listIconShow="listIconShow"
    ></page-header>
    <list-tab
    :fieldData="fieldData"
    ></list-tab>
    <list-scroll-wrapper
    :courseData="courseData"
    >

    </list-scroll-wrapper>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import {findItemIndex} from 'utils/tools'
import PageHeader from 'components/Header'
import ListTab from 'components/ListTab'
import ListScrollWrapper from 'components/ScrollWrapper/List'
import ListModel from 'models/list'
const listModel = new ListModel();

export default {
 name:"ListPage",
 components:{
     PageHeader,
     ListTab,
     ListScrollWrapper
 },
 data(){
     return{
         backIconShow:true,
         listIconShow:false,
         fieldData:[],
         courseData:[],
         currentTabIndex: -1
     }
 },
 computed:{
    ...mapState(['field','tabIndex'])
 }
 ,
 async mounted(){
   await this.getCourseFields();
   this.getCourses(this.field);
   this.currentTabIndex=this.tabIndex
   this.changeTabIndex(findItemIndex(this.fieldData,this.field)+1)
 },
 activated(){
   if(this.currentTabIndex!==this.tabIndex){
     this.currentTabIndex=this.tabIndex;
     this.changeTabIndex(findItemIndex(this.fieldData,this.field)+1);
   }  
 },
 methods:{
   
   ...mapMutations(['changeTabIndex']),
  
  async getCourseFields(){
     const data=await listModel.getCourseFields();
           this.fieldData=data.result;
   },
  async  getCourses(field){
      const data=await listModel.getCourses(field);
      this.courseData=data.result;
   },
   
 },
 watch:{
   field(){
     this.getCourses(this.field);
   }
 }
}
</script>

<style lang="scss" scoped >

</style>